.btn() {
  width: 100%;
  padding: 5px 15px;
  border-radius: 2px;
  text-shadow: 0px -1px 0px #0000001f;
  box-shadow: 0px 1px 0px 0px #0000000b;
  color: #ffffff;
  font-size: 16px !important;
  background: #1890ff;
  border: solid #1890ff 1px;
  text-decoration: none;
}

.rotate_btn_box {
  display: flex;
  margin-left: 20px;
  & + .rotate_btn_box {
    margin-top: 10px;
  }
  .rotate_i_btn {
    font-size: 20px;
  }
}

.hooks_cropper_modal {
  display: flex;
  max-height: 500px;
  background: white;

  .cropper_container_container {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    .cropper_container {
      flex: 0 0 600px;
      margin-right: 20px;
      width: 690px;
      height: 460px;
      .cropper {
        width: 100%;
        height: 100%;
      }
    }
    .preview_container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      & > .cropper_preview_set_box {
        display: flex;
        align-items: flex-end;
      }
      .cropper_preview {
        width: 180px;
        height: 180px;
        overflow: hidden;
        border: 1px solid #383838;
      }
      .button_row {
        margin-top: 20px;
        .submit_button {
          .btn();

          &:hover {
            background: #40a9ff;
          }

          &_end {
            .btn();
            color: rgba(0, 0, 0, 0.65);
            background: #fff;
            border: solid #d9d9d9 1px;
            &:hover {
              color: #40a9ff;
              border-color: #40a9ff;
            }
          }

          & + .submit_button_end {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
